<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>艾融网络银行登录界面</title>
    <script src="../../static/js/jquery-1.11.0.js"></script>
    <style>

        body {
            overflow: hidden;
        }

        * {
            margin: 0;
            font-family:"Microsoft Yahei";
            color: #666;
        }
        .open_banner{
            width: 480px;
            height: 640px;
            position: absolute;
            top :50px;
            right: 200px;
            background: rgba(255, 255,255, 0.7);
            border-radius: 16px;
        }
        /*#open_background{
            width: 800px;
            height: 600px;
        }*/
        #l_content{
            position: relative;
            left: 100px;
            top: 80px;
        }

        #content{
            position: relative;
            left: 50px;
            top: 120px;
        }
        .form{
            position: relative;
            left: 30px;
            top:-40px;
        }

        .form .txt{
            width: 180px;
            height: 20px;

        }
        h1{
            position: relative;
            left: 90px;
             top:-30px;

        }
        .form span {
            position: relative;
            left: 150px;
            color: red;
        }



    </style>
    <script>
        $(function () {
            //重新获取焦点后提示语句清空
            $("#i1").focus(function (){
                $("#sps1").text("");
            });
            $("#i2").focus(function (){
                $("#sps2").text("");
            });
            $("#i3").focus(function (){
                $("#sps3").text("");
            });

            $("#i4").focus(function (){
                $("#sps4").text("");
            });

            $("#i5").focus(function (){
                $("#sps5").text("");
            });
            //拿到当前登录的用户的u_id
            var u_id = $("#userid").text();
            $.ajax({
                    type: "post",
                    url: "/OpenServlet",
                    dataType: "json",
                    data: {
                        action: "openAccount",
                        u_id: u_id,
                    },
                    success: function (d) {
                        if (d.code == 1) {
                            $("#i1").val(d.data.u_name);
                            $("#i2").val(d.data.u_idcard);
                            $("#i3").val(d.data.u_phone);
                        } else {
                            alert(d.msg)
                        }
                    }
                }
            )
            //姓名格式校验
            $("#i1").focusout(function () {
                var u_id = $("#i1").val();
                u_id=$.trim(u_id);
                //2-8汉字正则表达式
                var u_idPatt = /^[\u4e00-\u9fa5]{2,6}$/
                if (u_id == null || u_id == "") {
                    $("#sps1").text("姓名不能为空！");
                }else if (!u_idPatt.test(u_id)) {
                    //4 提示用户结果
                    $("#sps1").text("输入格式错误！");

                }
            });
            //身份证格式校验
            $("#i2").focusout(function () {
                var u_idcard = $("#i2").val();
                u_idcard=$.trim(u_idcard);
                var u_idcardPatt = /^[0-9]{18}$/
                if (u_idcard == null || u_idcard == "") {
                    $("#sps2").text("身份证不能为空！");
                }else if (!u_idcardPatt.test(u_idcard)) {
                    //4 提示用户结果
                    $("#sps2").text("输入格式错误！");

                }
            });

            //手机号格式校验
            $("#i3").focusout(function () {
                //验证手机号格式是否正确,必须是以1开头，第二位[3,9]中的任意一个,后面9位[0，9]中的任意个数
                //获取输入框中输入的手机号

                var u_phone = $("#i3").val();
                u_phone = $.trim(u_phone);
                //构建正则表达式
                var u_phonePatt = /^1[3-9][0-9]{9}$/
                //3 使用test方法验证
                if (u_phone == null || u_phone == "") {
                    $("#sps3").text("手机号不能为空！");
                } else if (!u_phonePatt.test(u_phone)) {
                    //4 提示用户结果
                    $("#sps3").text("手机号输入错误！");

                }
            });
                //密码格式校验
                $("#i4").focusout(function () {
                    //验证密码格式是否正确8-16位，由字母,数字和特殊符号至少两种集合组成
                    //获取密码框中的密码
                    var password = $("#i4").val();
                    password = $.trim(password);
                    //构建正则表达式
                    var paswordPatt = /^[0-9]{6}$/;
                    //3 使用test方法验证
                    if (password == null || password == "") {
                        $("#sps4").text("密码不能为空!");
                    } else if (!paswordPatt.test(password)) {
                        //4 提示用户结果
                        $("#sps4").text("密码为6-18位数字，字母,符号");
                    }

                });
            //两次密码是否相同的校验
            $("#i5").focusout(function () {
                var password1 = $("#i4").val();
                var password2 = $("#i5").val();
                password2 = $.trim(password2);
                if (password2 == null || password2 == "") {
                    $("#sps5").text("确认密码不能为空!");
                } else if (password1 != password2) {
                    $("#sps5").text("两次输入密码不一致!");
                }

            });
            $("#sub_btn").click(function () {
                var c_phone = $("#i3").val();
                var  c_pwd2 = $("#i5").val();
                var c_account = $("#i6").val();
                var u_id = $("#userid").text();
                $.ajax({
                    type: "post",
                    url: "/OpenServlet",
                    dataType: "json",
                    data: {
                        action: "appOpenCard",
                        u_id: u_id,
                        c_phone:c_phone,
                        c_pwd:c_pwd2,
                        c_account:c_account,

                    },
                    success: function (d) {
                        if (d.code == 1) {
                            alert(d.msg)
                        } else {
                            alert(d.msg)
                        }
                    }
                })
            })

        })

    </script>

</head>
<body>
<div id="open_background">
    <img class="open_img" alt="" src="../../static/img/login.jpg" >
</div>
<div class="open_banner">
    <div id="l_content">
        <h1>开 户</h1>
        <!--<span class="login_word">欢迎登录</span>-->
    </div>

    <div id="content">
        <div class="open_form">
            <div class="open_box">
                <!--<div class="msg_cont">
                    <b></b>
                    <span class="errorMsg">
                                &lt;!&ndash;获取回显的错误信息&ndash;&gt;
                                ${empty msg ? "请输入用户名和密码":msg }
                            </span>
                </div>-->
                <div class="form">
                    <form action="" method="post">
                        <input type="hidden" name="action" value="open" />
                        <label>请输入您的姓名：</label>
                        <input class="txt" id="i1" type="text" placeholder="请输入姓名"
                               autocomplete="off" tabindex="1" name="u_name" style="position: relative;left: 15px"  />
                        <!--获取回显的用户名-->
                        <br >
                        <spen id="sps1" style="color: red; position: relative;left: 150px"></spen>
                        <br>
                        <br>
                        <label>请输入您的身份证：</label>
                        <input class="txt" id="i2" type="text" placeholder="请输入身份证"
                               autocomplete="off" tabindex="1" name="idcard" />
                        <br>
                        <span id="sps2"></span>
                        <br>
                        <br>
                        <label>请输入您的手机号：</label>
                        <input class="txt" id="i3" type="text" placeholder="请输入手机号"
                               autocomplete="off" tabindex="1" name="phone" />
                        <br>
                        <span id="sps3" ></span>
                        <br>
                        <br>
                        <label>请设置支付密码：</label>
                        <input class="txt" id="i4" type="password" placeholder="请输入密码"
                               autocomplete="off" tabindex="1" name="paypwd1" style="position: relative;left: 15px"  />
                        <!--获取回显的用户名-->
                        <br >
                        <span id="sps4" ></span>
                        <br>
                        <br>
                        <label>再次输入支付密码：</label>
                        <input class="txt" id="i5" type="password" placeholder="请再次输入密码"
                               autocomplete="off" tabindex="1" name="paypwd2" />
                        <br>
                        <span id="sps5" ></span>
                        <br>
                        <br>
                        <label>请选择开户行：</label>
                        <select  id="i6" style="width: 190px;position: relative;left: 33px">
                            <option value="-1">---请选择开户行---</option>
                            <option value="0">中国银行</option>
                            <option value="1">中国邮政</option>
                            <option value="2">中国农业银行</option>

                        </select>

                        <br>
                        <br>
                        <br>





                        <input type="submit" value="开户" id="sub_btn"  style="width: 200px;height: 40px;position: relative;left: 50px;border-radius: 16px;"/>


                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>